<template>
  <n-form
    :label-width="80"
    :model="formValue"
    :rules="rules"
    ref="formRef"
    size="medium"
  >
    <n-form-item label="用户学号" path="user.number">
      <n-input v-model:value="formValue.user.number" placeholder="学号" class="register_input"/>
    </n-form-item>
    <n-form-item label="用户密码" path="user.password">
      <n-input placeholder="密码" v-model:value="formValue.user.password" class="register_input"/>
    </n-form-item>
    <n-form-item label="确认密码" path="reenteredPassword">
      <n-input placeholder="再一次确认密码" v-model:value="formValue.reenteredPassword" class="register_input"/>
    </n-form-item>
    <n-form-item label="QQ邮箱" path="user.email">
      <n-auto-complete :options="options" v-model:value="formValue.user.email"
                       #="{ handleInput, handleBlur, handleFocus, value }">
        <n-input placeholder="绑定邮箱" :value="formValue.user.email"
                 @input="handleInput"
                 @focus="handleFocus"
                 @blur="handleBlur"
                 class="register_input"/>
      </n-auto-complete>
    </n-form-item>
    <n-form-item label="邮箱认证" path="emailVerification">
      <n-input placeholder="验证码" v-model:value="formValue.emailVerification" class="register_input"/>
    </n-form-item>
    <n-form-item>
      <n-row :gutter="[0, 24]">
        <n-col :span="24">
          <div style="display: flex; justify-content: space-evenly;">
            <n-button
              @click="handleValidateClick"
              color="#169bd5"
              size=""
              round
              type="success"
            >
              注册
            </n-button>
            <n-button
              @click="cancleNumber"
              color="#169bd5"
              size="large"
              round
              type="primary"
            >
              取消
            </n-button>
          </div>
        </n-col>
      </n-row>
    </n-form-item>
  </n-form>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { validateEMail } from '../static/validate'

export default defineComponent({
  setup () {
    const formRef = ref()
    const message = useMessage()
    const formValue = ref({
      user: {
        number: '',
        password: '',
        email: ''
      },
      reenteredPassword: '',
      emailVerification: ''
    })
    return {
      formRef,
      formValue,
      rules: {
        user: {
          number: {
            required: true,
            message: '学号不能为空',
            trigger: 'blur',
            validator: (rule, value) => {
              if (value === '') {
                return new Error('密码不能为空')
              }
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  if (value !== '201972130310') {
                    resolve()
                  } else {
                    reject(Error('该学号已存在'))
                  }
                }, 200)
              })
            }
          },
          password: {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          email: [
            {
              required: true,
              message: '邮箱不能为空',
              trigger: 'blur'
            },
            {
              validator: validateEMail,
              trigger: 'blur'
            }
          ]
        },
        reenteredPassword: [
          {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value) => {
              if (value !== formValue.value.user.password) {
                return new Error('密码不匹配')
              }
            },
            trigger: 'blur'
          }
        ]
      },
      options: computed(() => {
        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
          const prefix = formValue.value.user.email.split('@')[0]
          return {
            label: prefix + suffix,
            value: prefix + suffix
          }
        })
      }),
      cancleNumber (e) {
        formValue.value.user.number = ''
        formValue.value.user.password = ''
        formValue.value.user.email = ''
        formValue.value.emailVerification = ''
        formValue.value.reenteredPassword = ''
      },
      handleValidateClick (e) {
        e.preventDefault()
        const messageReactive = message.loading('注册中...', {
          duration: 0
        })
        formRef.value.validate((errors) => {
          if (!errors) {
            message.success('注册成功')
          } else {
            message.error('注册失败')
          }
          messageReactive.destroy()
        })
      }
    }
  }
})
</script>
<style>
  .register_input {
    border-radius: 20px;
    background-color: #f2f2f2;
  }
</style>
